  <template>
  <!-- 邮寄地址 新增 ｜ 编辑 -->
  <el-dialog :title="data.id?'地址编辑':'地址新增'" :visible.sync="dialogVisible" :close-on-click-modal="closeModal" :close-on-press-escape="closeEscape" :before-close="close" class="address-info-dialog">
    <div class="address-info-wrapper">
      <!-- form 表单-->
      <el-form :model="invoiceForm" :rules="rules" ref="invoiceForm" label-width="130px">
        <el-form-item label="收件人姓名:" prop="addressee">
          <el-input type="text" v-model="invoiceForm.addressee" maxlength="20" placeholder="请输入收件人姓名" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="收件人电话:" prop="addresseePhone">
          <el-input type="text" v-model="invoiceForm.addresseePhone" maxlength="30" placeholder="请输入收件人电话" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="收件人地址:" prop="addresseeAddress">
          <el-input type="textarea" v-model="invoiceForm.addresseeAddress" placeholder="请输入收件人地址" maxlength="140" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="收件人邮箱:" prop="email">
          <el-input type="text" v-model="invoiceForm.email" placeholder="请输入收件人邮箱" maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="是否设置为默认:">
          <el-checkbox v-model="invoiceForm.isDefault">默认</el-checkbox>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="close">取 消</el-button>
      <el-button v-if="data.id" type="primary" size="mini" :loading="submitLoading" @click="submit('update')">保 存</el-button>
      <el-button v-else type="primary" size="mini" :loading="submitLoading" @click="submit('add')">保 存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import dialog from '@mix/dialog'
import { addInvoiceAddressApi,updateInvoiceAddressApi} from '@/api/finance'
import validate from '@/utils/validate'

export default {
  mixins: [dialog],
  props:{
    data:{
      type: Object,
      default: () => ( {} )
    }
  },
  data(){
    return {
      invoiceForm: {},
      rules:{
        addressee: [
          { required: true, message: '请输入收件人姓名', trigger: 'blur' }
        ],
        addresseePhone: [
          { required: true, message: '请输入收件人电话', trigger: 'blur' }
        ],
        addresseeAddress: [
          { required: true, message: '请输入收件人地址', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入收件人邮箱', trigger: 'blur' },
          { validator: validate.validateEmail, trigger: 'blur' }
        ],
      },
      submitLoading: false
    }
  },
  created(){
    if(this.data.id){
      this.invoiceForm = this.data
    }
  },
  methods:{
    //提交保存
     submit(flag = 'add'){
      this.$refs['invoiceForm'].validate((valid) => {
        if (valid) {
          this.submitLoading = true
          let data = {...this.invoiceForm}
          data.type = this.invoiceForm.isDefault ? 0 : 1
          if(flag === 'add'){
            this.addAddress(data)
          }else{
            this.updateAddress(data)
          }
        } 
      }) 
    },
    async addAddress(data){
      const { code, message } = await addInvoiceAddressApi(data)
      this.messageTip('add',code, message) 
    },
    async updateAddress(data){
      const { code, message } = await updateInvoiceAddressApi(data)
      this.messageTip('update',code, message)
    },
    messageTip(flag = 'add',code){
      if(code === 200){
        this.submitLoading = false
        this.$message.success(flag === 'update' ? '修改成功' : '添加成功')
        this.$emit('close')
      }else{
        this.submitLoading = false
      }
    },
  }
}
</script>
<style lang="less" scoped>
.address-info-wrapper{
  padding: 0 20px;
  .el-form-item {
    margin-bottom: 18px;
  }
}
</style> 